<template>
  <div class="index">
    <h1 class="show-time">{{ msg | formartTime }}</h1>
    <div class="user">
      <ul class="user-list">
        <li
          v-for="(item, index) in userList"
          :key="item.id"
          :style="{ backgroundColor: item.color }"
          :class="{ active: index == listIndex }"
          @click="listIndex = index"
        >
          <div>
            <img class="avatar" :src="item.imgUrl" alt="avatar" />
            <span>{{ item.name }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import userApi from "../api/user.js";
import formart from "../utils/formart";

export default {
  data() {
    return {
      msg: new Date(),
      listIndex: 0,
      userList: [
        {
          id: "0",
          imgUrl:
            "https://ae01.alicdn.com/kf/Uc46e6eb0497a49bb9bc5fe4c6ded0afaE.jpg",
          name: "user01",
          color: "#00caa5",
        },
        {
          id: "2",
          imgUrl:
            "https://ae01.alicdn.com/kf/Uc46e6eb0497a49bb9bc5fe4c6ded0afaE.jpg",
          name: "user01",
          color: "#f45126",
        },
      ],
    };
  },
  mounted() {
    userApi.getUserList().then((res) => {
      this.userList = res.data.userList;
      this.listIndex = this.userList.findIndex((value) => value.active == true);
    });
    setInterval(() => {
      this.msg = new Date();
    }, 1000);
  },
  filters: {
    formartTime(time) {
      return formart.formatTime2(time);
    },
  },
};
</script>

<style lang="scss">
.index {
  .show-time {
    color: $main-color;
    text-align: center;
  }

  .user {
    &-list {
      margin: 0 20px;

      > li + li {
        margin-top: 10px;
      }

      > li {
        border-radius: 0.625rem;
        display: block;
        padding: 2px 10px 2px 2px;

        > div {
          background-color: white;
          border-radius: 0.625rem;
          padding: 10px;
          display: flex;
          align-items: center;
          transition: all 0.3s ease;

          > * + * {
            margin-left: 10px;
          }

          > img.avatar {
            width: 45px;
            height: 45px;
            border-radius: 0.625rem;
            border: 1px solid $font-color;
          }

          > span {
            font-size: 24px;
            color: $dark-color;
            transition: all 0.3s ease;
          }
        }

        &.active,
        &:hover {
          > div {
            background-color: transparent;
            > span {
              color: white;
            }
          }
        }

        &:active {
          > div {
            opacity: 0.6;
          }
        }
      }
    }
  }
}
</style>